<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/myQuery.js"></script>
    <!-- <script src="../js/jquery-3.6.0.min.js"></script> -->
    <style>
        #title {
            line-height: 40px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }

        .button-group {
            margin-top: 10px;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">DOM操作</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
    <div class="button-group">
        <button class="html">html</button>
        <button class="hide">hide</button>
        <button class="show">show</button>
        <button class="width">width</button>
        <button class="height">height</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="toggleClass">toggleClass</button>
        <button class="hasClass">hasClass</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="index">index</button>
        <button class="chain">链式操作</button>
    </div>
</body>

<script>
    $(".html").click(function () {
        $(".list li").html("123123");
    })

    $(".hide").click(function () {
        $(".list li").hide();
    })

    $(".show").click(function () {
        $(".list li").show();
    })

    $(".width").click(function () {
        // $(".list li").width("200px");
        $(".list li").width(200);
        console.log($(".list li").width());
    })

    $(".height").click(function () {
        // $(".list li").height("200px");
        $(".list li").height(200);
        console.log($(".list li").height());
    })

    $(".css").click(function () {
        $(".list").css("overflow", "hidden");

        // 每次设置一个css属性太麻烦 => 可以将设置的css属性名和属性值整合到对象中 => 传入一个对象参数
        // $(".list li").css("width", "100px");
        // $(".list li").css("height", "100px");
        // $(".list li").css("background", "green");
        // $(".list li").css("float", "left");

        $(".list li").css({
            width: "100px",
            height: "100px",
            background: "green",
            float: "left",
        })


        console.log($(".list li").css("width"));
        console.log($(".list li").css("height"));
        console.log($(".list li").css("backgroundColor"));
        console.log($(".list li").css("float"));

    })


    $(".addClass").click(function () {
        $(".list li").addClass("one two three four");
    })

    $(".removeClass").click(function () {
        $(".list li").removeClass("one two three four");
    })

    $(".toggleClass").click(function () {
        $(".list li:nth-child(1)").toggleClass("active");
    })
    $(".hasClass").click(function () {
        console.log($(".list li:nth-child(1)").hasClass("active"));
    })

    $(".attr").click(function () {
        $(".list li").attr("id", "demo");
        $(".list li").attr("class", "one");
        $(".list li").attr("title", "hello");
        $(".list li").attr("asd", "asd");
    })

    $(".prop").click(function () {
        $(".list li").prop("id", "demo");
        $(".list li").prop("className", "one");
        $(".list li").prop("title", "hello");
        console.log($(".list li").prop("clientWidth"));
        console.log($(".list li").prop("offsetLeft"));
    })

    $(".eq").click(function () {
        $(".list li").eq(2).css({ background: "red" });
    })

    $(".siblings").click(function () {
        // $(".first").siblings().css({ background: "green" });
        // $(".list li").eq(2).siblings().css({ background: "green" });
        $(".first,.last").siblings().css({ background: "green" });
    })
    $(".index").click(function () {
        console.log($(".mid").index());
    })

    // 链式操作: 本质=> 函数在执行完毕之后又返回了相同类型的数据(原本的/新的)
    // var arr = [1, 2, 3, 4];
    // arr.reverse().reverse().reverse().reverse().reverse().reverse();
    // var newArr = arr.concat(5, 6).concat(7, 8).concat(9)
    // console.log(newArr);

    // var s = new Set();
    // s.add(1).add(2).add(3).add(1).add(2).add(3);
    // console.log(s);

    var p = new Promise(function () { })
    // p.then().then().then().then().then().catch().finally()

    // 对于GetEle.prototype上 除了取值操作以外的所有方法进行链式处理  
    $(".chain").click(function () {
        $(".list li").eq(2).html("hello").width(200).height(200).css({ background: "red" }).click(function () {
            console.log($(this).index())
        }).siblings().html("world").width(100).height(100).css({ background: "green" });
    })




    $(".list li").click(function () {
        console.log(this); // 原生DOM元素  => 只能使用原生的属性和方法 this.classList.add("active") => 不能使用GetEle.prototype的方法  => 如果想要使用GetEle.prototype的方法 => 转化为相应的实例化对象

        // debugger;
        // console.log($(this));
        // $(this).addClass("active");

        // $(this).addClass("active");
        // $(this).siblings().removeClass("active");

        $(this).addClass("active").siblings().removeClass("active");

    })



</script>

</html>